<!--多条件搜索-->
<form nz-form [formGroup]="formModel">
  <div class="toolbar margin-bottom" [ngClass]="isMobile?'wrap-mobile':'wrap'">
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6" *ngIf="userInfo.roleId == roleIdEnum.SUPER_ADMINISTRATOR || userInfo.roleId == roleIdEnum.AGENT">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="name">合作伙伴</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="请选择合作伙伴">
          <nz-select formControlName="agencyId" nzShowSearch nzAllowClear nzPlaceHolder="请选择合作伙伴"
                     (ngModelChange)="gainAgencyId($event)">
            <nz-option *ngFor="let item of agencyList" [nzLabel]="item.name" [nzValue]="item.id"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="name">运营商</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="请选择运营商">
          <nz-select formControlName="userId" nzShowSearch nzAllowClear nzPlaceHolder="请选择运营商"
                     (ngModelChange)="gainUserId($event)">
            <nz-option *ngFor="let item of userList" nzLabel="{{item?.username}}   {{item?.name}}"
                       nzValue="{{item.id}}"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="name">场地</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="请选择场地">
          <nz-select nzShowSearch nzAllowClear nzPlaceHolder="请选择场地" formControlName="merchantStoreId">
            <nz-option nzLabel="不限" nzValue="0"></nz-option>
            <nz-option *ngFor="let item of merchantStoreList" [nzLabel]="item.storeName"
                       [nzValue]="item.id"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="name">设备类型</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="请选择设备类型">
          <nz-select nzShowSearch nzAllowClear nzPlaceHolder="请选择设备类型" formControlName="deviceTypeId">
            <nz-option *ngFor="let item of deviceTypeList" [nzLabel]="item.deviceTypeName"
                       [nzValue]="item.id"></nz-option>
          </nz-select>
          <!--          <nz-select formControlName="name" nzShowSearch nzAllowClear nzPlaceHolder="Select a person"-->
          <!--                     [(ngModel)]="selectedValue">-->
          <!--            <nz-option nzLabel="Jack" nzValue="jack"></nz-option>-->
          <!--            <nz-option nzLabel="Lucy" nzValue="lucy"></nz-option>-->
          <!--            <nz-option nzLabel="Tom" nzValue="tom"></nz-option>-->
          <!--          </nz-select>-->
        </nz-form-control>
      </nz-form-item>
    </div>
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="name">设备状态</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="请选择设备状态">
          <nz-select formControlName="status" nzShowSearch nzAllowClear nzPlaceHolder="请选择设备状态"
          >
            <nz-option nzLabel="下架（禁用/禁止支付）" nzValue="0"></nz-option>
            <nz-option nzLabel="在营（正常支付）" nzValue="1"></nz-option>
            <nz-option nzLabel="故障" nzValue="2"></nz-option>
            <nz-option nzLabel="未激活" nzValue="3"></nz-option>
            <nz-option nzLabel="解绑" nzValue="4"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="name">网络状态</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="请选择网络状态">
          <nz-select formControlName="networkIntensity" nzShowSearch nzAllowClear nzPlaceHolder="请选择网络状态"
                     [(ngModel)]="selectedValue">
            <nz-option nzLabel="在线" nzValue="1"></nz-option>
            <nz-option nzLabel="弱差" nzValue="2"></nz-option>
            <nz-option nzLabel="离线" nzValue="3"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6" *ngIf="userInfo.roleId == roleIdEnum.SUPER_ADMINISTRATOR">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="name">主板名称</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="请选择主板名称">
          <nz-select nzShowSearch nzAllowClear nzPlaceHolder="请选择主板名称" formControlName="productId">
            <nz-option nzLabel="不限" nzValue="0"></nz-option>
            <nz-option *ngFor="let item of mainBoardList" [nzLabel]="item.mainBoardName"
                       [nzValue]="item.id"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="name">主板/网络类型</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="请选择系统类型">
          <nz-select formControlName="syntheticType" nzShowSearch nzAllowClear nzPlaceHolder="请选择系统类型">
            <nz-option nzLabel="安卓板兑币机" nzValue="1"></nz-option>
            <nz-option nzLabel="安卓板售货机" nzValue="2"></nz-option>
            <nz-option nzLabel="安卓板门闸机" nzValue="3"></nz-option>
            <nz-option nzLabel="安卓板存币存票机" nzValue="4"></nz-option>
            <nz-option nzLabel="蓝牙售货机" nzValue="5"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="name">设备号</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="请输入设备号">
          <input type="text" id="deviceNo" nz-input formControlName="deviceNo" placeholder="请输入设备号"/>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div class="item" nz-col nzXs="24" nzSm="12" nzMd="7" nzLg="7" nzXl="3" class="margin-bottom"
         [ngClass]="isMobile? '': 'padding-left'" (click)="submitForm()">
      <button *ngIf="!isMobile" nz-button nzType="primary" class="button_search"><i nz-icon nzType="search"
                                                                                    nzTheme="outline"></i>查询
      </button>
      <button *ngIf="isMobile" nz-button nzBlock nzType="primary" class="button_search"><i nz-icon nzType="search"
                                                                                           nzTheme="outline"></i>查询
      </button>
    </div>

  </div>
</form>

<div [ngClass]="isMobile?'wrap-mobile':'wrap'">
  <div class="margin-bottom ">
    <button class="margin-bottom" nz-button nzType="primary" (click)="editShow()" *ngIf="userInfo.roleId == roleIdEnum.SUPER_ADMINISTRATOR">
      <i nz-icon nzType="plus" nzTheme="outline"></i>添加设备
    </button>
    <button [ngClass]="userInfo.roleId == roleIdEnum.SUPER_ADMINISTRATOR?'margin-left':'margin-bottom'" nz-button nzType="primary"
            (click)="batchDownload()">
      <i nz-icon nzType="cloud-download" nzTheme="outline"></i>批量下载设备码
    </button>

    <button class="margin-left margin-bottom" nz-button nzType="primary" (click)="distributionDevice()"
            *ngIf=" userInfo.roleId == roleIdEnum.SUPER_ADMINISTRATOR || userInfo.roleId == roleIdEnum.AGENT"
            >
      <i nz-icon nzType="apartment" nzTheme="outline"></i>
      设备分配
    </button>

    <button class="margin-left margin-bottom" nz-button nzType="primary" (click)="batchOperationStatus()"
            *ngIf=" userInfo.roleId == roleIdEnum.SUPER_ADMINISTRATOR || userInfo.roleId == roleIdEnum.AGENT">
      <i nz-icon nzType="warning" nzTheme="outline"></i>
      批量启用/禁用设备
    </button>


    <div class="statis">
    <span class="item">
      总数：<span class="text-red">{{deviceStatistic?.deviceNoCount}}</span>
    </span>
      <span class="item">
      在营： <span class="text-red">{{deviceStatistic?.deviceNoDoBusinessCount}}</span>
    </span>
      <span class="item">
      在线：<span class="text-red">{{deviceStatistic?.deviceOnLineCount}}</span>
    </span>
      <span class="item">
      离线：<span class="text-red">{{deviceStatistic?.deviceOffLineCount}}</span>
    </span>
      <span class="item">
      未激活：<span class="text-red">{{deviceStatistic?.deviceInactiveCount}}</span>
    </span>
      <span class="item">
      解绑：<span class="text-red">{{deviceStatistic?.deviceUntieCount}}</span>
    </span>
    </div>

  </div>

  <nz-table #nzTable [nzData]="listOfData" nzTableLayout="fixed"
            [(nzPageIndex)]="pageHelper.currentPage" [nzFrontPagination]="false"
            (nzPageIndexChange)="nzPageIndexChange($event)"
            [(nzPageSize)]="pageHelper.pageSize" [nzTotal]="pageHelper.totalItems"
            [nzScroll]="{ x: 'auto' }"
            nzShowSizeChanger [nzPageSizeOptions]="pageHelper.pageSizeOptions"
            (nzPageSizeChange)="onPageSizeChange($event)">
    <thead>
    <tr>
      <th [nzChecked]="baseService.zorro.checked"
          [nzIndeterminate]="baseService.zorro.indeterminate"
          (nzCheckedChange)="checkedAll($event)" nzLeft></th>
      <th>设备</th>
      <th *ngIf="userInfo.roleId == roleIdEnum.SUPER_ADMINISTRATOR || userInfo.roleId == roleIdEnum.AGENT">合作伙伴</th>
      <th>运营商</th>
      <th>投放场地</th>
      <th>网络 / 状态</th>
      <th *ngIf="userInfo.roleId == roleIdEnum.SUPER_ADMINISTRATOR">累计交易额</th>
      <th>物联卡号</th>
      <th>操作</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <ng-container *ngFor="let data of nzTable.data">
      <tr>
        <td
          [nzChecked]="baseService.zorro.setOfCheckedId.has(data.id)"
          [nzDisabled]="data.disabled"
          (nzCheckedChange)="checkedItem(data.id, $event)" nzLeft
        ></td>
        <td nzEllipsis>
          <div style="text-align: center">
            <div *ngIf="data.isAndroid">
              <span nz-icon nzType="android" nzTheme="outline" style="color: #4078FE;font-size: 18px;"></span>
            </div>
            <div>
              <span>{{data.deviceNo}}</span>
              <a (click)="showQrCode(data)"><i nz-icon nzType="qrcode"></i></a>
              <!--          这个隐藏节点是用来批量存储下载二维码的-->
              <div hidden="hidden">
                <div [id]="'qrCode' + data.id"></div>
              </div>

            </div>
            <div (click)="showQrCode(data)">
              {{data.alias!=null?data.alias+'号_':''}}
              <span *ngIf="data.deviceTypeName" style="margin-right: 7px">{{data.deviceTypeName}}</span>
              {{data.remarkName!=null?'('+data.remarkName+')':''}}
            </div>

            <div *ngFor="let deviceItem of data.deviceItemVoList">
              <span *ngIf="data.networkIntensity > 0 && data.pulseSwitchState == true">
                <nz-tag nzColor="success">脉冲</nz-tag>
              </span>
              <span *ngIf="data.networkIntensity == 0 && data.pulseSwitchState == true">
                <nz-tag>脉冲</nz-tag>
              </span>
              <span *ngIf="data.networkIntensity > 0 && data.pulseSwitchState == false && deviceItem.productId != null">
                <nz-tag nzColor="success" *ngIf="deviceItem.productId > 0">
                  <span *ngIf="data.deviceTypeId == deviceTypeEnum.ONE_TO_MANY_BOXES">串口{{deviceItem.hierarchy}}</span>
                  <span *ngIf="data.deviceTypeId != deviceTypeEnum.ONE_TO_MANY_BOXES">串口</span>
                </nz-tag>
                <nz-tag *ngIf="deviceItem.productId <= 0">
                  <span *ngIf="data.deviceTypeId == deviceTypeEnum.ONE_TO_MANY_BOXES">串口{{deviceItem.hierarchy}}</span>
                  <span *ngIf="data.deviceTypeId != deviceTypeEnum.ONE_TO_MANY_BOXES">串口</span>
                </nz-tag>
              </span>

              <span *ngIf="data.pulseSwitchState == false && userInfo.roleId == roleIdEnum.SUPER_ADMINISTRATOR">
                登录标识：{{deviceItem.loginId}}
              </span>
            </div>
          </div>

        </td>

        <td nzEllipsis *ngIf="userInfo.roleId == roleIdEnum.SUPER_ADMINISTRATOR || userInfo.roleId == roleIdEnum.AGENT">{{data.agencyName}}</td>
        <td nzEllipsis>
          <div *ngIf="data.username && data.merchantStoreId > 0">
            <div>{{data.username}}</div>
            <div class="text-sm text-grey">{{data.name}}</div>
          </div>
          <span *ngIf="!data.username && data.merchantStoreId > 0"><nz-tag nzColor="success">微信登录</nz-tag></span>
        </td>

        <td nzEllipsis>
          <a *ngIf="data.merchantStoreId > 0" (click)="skipStore(data)">{{ data.storeName }}</a>
        </td>

        <td nzEllipsis>
          <div>
            <div style="display: flex">
              <c-signal [signal]="data.networkIntensity" style="margin-right: 10px"></c-signal>
              <span *ngIf="data.status == 0">下架</span>
              <span *ngIf="data.status == 1">在营</span>
              <span *ngIf="data.status == 2">故障</span>
              <span *ngIf="data.status == 3">未激活</span>
              <span *ngIf="data.status == 4">解绑</span>
              <span *ngIf="data.status == 5">维修替换</span>
            </div>
            <div style="margin-top: 6px">
              {{ data.lastHeartbeat | date: 'yyyy-MM-dd HH:mm:ss'}}
            </div>
          </div>
        </td>

        <td nzEllipsis *ngIf="userInfo.roleId == roleIdEnum.SUPER_ADMINISTRATOR">{{data.totalTransactionAmount}}</td>
        <td nzEllipsis>
          <div> {{data.sim_ICC_ID}}</div>
        </td>

        <td nzEllipsis>

          <div class="margin-bottom-6"
               *ngIf="userInfo.roleId == roleIdEnum.SUPER_ADMINISTRATOR && (data.status == 0 || data.status == 5)">
            <a (click)="updateStandUpAndDown(data)">
              <nz-tag [nzColor]="'success'">上架</nz-tag>
            </a>
          </div>

          <div class="margin-bottom-6"
               *ngIf="userInfo.roleId == roleIdEnum.SUPER_ADMINISTRATOR && (data.status != 0 && data.status != 5)">
            <a (click)="updateStandUpAndDown(data)">
              <nz-tag [nzColor]="'error'">下架</nz-tag>
            </a>
          </div>

          <div class="margin-bottom-6"
               *ngIf="userInfo.roleId == roleIdEnum.SUPER_ADMINISTRATOR || userInfo.roleId == roleIdEnum.AGENT">
            <a (click)="clearFreightLane(data.deviceNo)">
              <nz-tag [nzColor]="'warning'">清除货道</nz-tag>
            </a>
          </div>
          <div class="margin-bottom-6"
               *ngIf="(userInfo.roleId == roleIdEnum.SUPER_ADMINISTRATOR || userInfo.roleId == roleIdEnum.AGENT) && data.status == 4">
            <a (click)="restoreFactoryDefault(data.id, data.status)">
              <nz-tag [nzColor]="'error'">恢复出厂状态</nz-tag>
            </a>
          </div>
          <div class="margin-bottom-6" *ngIf="userInfo.roleId == roleIdEnum.SUPER_ADMINISTRATOR">
            <a (click)="checkOnlineAndOffline(data)">
              <nz-tag [nzColor]="'success'">查看上线离线时间点</nz-tag>
            </a>
          </div>
          <div class="margin-bottom-6" *ngIf="userInfo.roleId == roleIdEnum.SUPER_ADMINISTRATOR &&
          (data.deviceTypeId == deviceTypeEnum.VENDING_MACHINE || data.deviceTypeId == deviceTypeEnum.SCREEN_VENDING_MACHINE
                || data.deviceTypeId == deviceTypeEnum.OPEN_DOOR_VENDING_MACHINE  || data.deviceTypeId == deviceTypeEnum.BLEND_VENDING_MACHINE)">
            <a (click)="modifyTheTypeOfCargoLaneEquipmentShow(data)">
              <nz-tag [nzColor]="'warning'">修改货道设备类型</nz-tag>
            </a>
          </div>
        </td>
        <td nzEllipsis>

          <div class="margin-bottom-6" *ngIf="data.merchantStoreId != null && data.merchantStoreId > 0">
            <a (click)="unBindingDevice(data)">
              <nz-tag [nzColor]="'warning'">解绑</nz-tag>
            </a>
          </div>

          <div *ngIf="(userInfo.roleId == roleIdEnum.SUPER_ADMINISTRATOR || userInfo.roleId == roleIdEnum.AGENT) &&
                (data.deviceTypeId == deviceTypeEnum.VENDING_MACHINE || data.deviceTypeId == deviceTypeEnum.SCREEN_VENDING_MACHINE
                || data.deviceTypeId == deviceTypeEnum.OPEN_DOOR_VENDING_MACHINE  || data.deviceTypeId == deviceTypeEnum.BLEND_VENDING_MACHINE)">
            <div class="margin-bottom-6" >
              <a (click)="setDeviceTypeVisible(true, data)">
                <nz-tag [nzColor]="'success'">售货机参数设置</nz-tag>
              </a>
            </div>

            <div class="margin-bottom-6" >
              <a (click)="getConfiguration(data)">
                <nz-tag [nzColor]="'success'">同步售货机参数</nz-tag>
              </a>
            </div>
          </div>

          <div class="margin-bottom-6" *ngIf="data.merchantStoreId > 0 && userInfo.roleId == roleIdEnum.SUPER_ADMINISTRATOR || userInfo.roleId == roleIdEnum.AGENT">
            <a (click)="unbindSum(data)">
              <nz-tag [nzColor]="'warning'">清除解绑次数</nz-tag>
            </a>
          </div>

          <div class="margin-bottom-6" *ngIf="userInfo.roleId == roleIdEnum.SUPER_ADMINISTRATOR">
            <a (click)="sendTestCmd(data)">
              <nz-tag [nzColor]="'success'">发送测试协议</nz-tag>
            </a>
          </div>

        </td>
      </tr>
      <tr nzEllipsis [nzExpand]="expandSet.has(data.id)">
        <span>{{ data.description }}</span>
      </tr>
    </ng-container>
    </tbody>
  </nz-table>
</div>

<div hidden="hidden">
  <div id="text"></div>
</div>

<app-code-info [isVisible]="qrCodeVisible" [qrCodeContent]="qrCodeContent" [fileName]="fileName"
               (emitVisible)="setQrCodeVisible($event)"></app-code-info>

<app-device-edit [isVisible]="batchEstablishVisible" (emitVisible)="setBatchEstablishVisible($event)"></app-device-edit>

<app-device-add [isVisible]="isVisible" (emit)="setVisible($event)"></app-device-add>

<app-maintenance-replace (ok)="updateMaintenanceAndReplace($event)" (emit)="hideMaintenanceAndReplace($event)"
                         [maintenanceAndReplaceShow]="maintenanceAndReplaceShow"
                         [data]="maintenanceAndReplace"></app-maintenance-replace>

<app-send-test-cmd [isVisible]="deviceSendTestCmdVisible"
                   [inputDevice]="device"
                   (emitVisible)="setSendTestCmdVisible($event)">
</app-send-test-cmd>

<app-remote-write-deviceno [isVisible]="remoteWriteDeviceNoVisible" [formModel]="formModelDeviceNo" (emit)="setRemoteWriteDeviceNoVisible($event)"></app-remote-write-deviceno>

<app-batch-operation-status [isVisible]="batchOperationStatusVisible" [inputDeviceListByUpdateStatus]="deviceListByUpdateStatus"
                            [total]="pageHelper.totalItems" [deviceAllSelected]="deviceAllSelected" [deviceFormModel]="formModel"
                            (emit)="setBatchOperationStatusVisible($event)"></app-batch-operation-status>

<app-device-type-edit [isVisible]="deviceTypeVisible"  [inputDevice]="device" (emitVisible)="setDeviceTypeVisible($event,null)"></app-device-type-edit>
<app-device-online-offline [deviceOnlineOfflineVisible]="deviceOnlineOfflineVisible" (emitVisible)="deviceOnlineOfflineEmitVisible($event)" [device]="device"></app-device-online-offline>
<app-aisle-device-type [displayRackItemVisible]="displayRackItemVisible"  (emitVisible)="modifyTheTypeOfCargoLaneEquipmentEmitVisible($event)" [device]="device"></app-aisle-device-type>


